<template>
  <!-- <div> -->
  <el-header height="60px" class="fixed">
    <el-row>
      <el-col :span="3">
        <span id="bookstore-title">
          <a href="#/">趣淘网上书城</a>
        </span>
      </el-col>
      <el-col :span="3">
        <ul v-if="!isLogin">
          <li>
            <a href="#/lr/login">请登陆</a>
          </li>
          <li>
            <a href="#/lr/register">注册</a>
          </li>
        </ul>
      </el-col>
      <el-col :span="4" :offset="14">
        <!-- <div class="sub-title">square</div> -->
        <el-dropdown>
          <div class="dropdown-1">
            <div class="block">
              <i class="el-icon-bell" />
            </div>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>暂无消息</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown>
          <div class="dropdown-2">
            <div class="block">
              <el-avatar :src="userAvatar" />
              <!-- https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png -->
            </div>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="toProfile">
              <span>个人中心</span>
            </el-dropdown-item>
            <el-dropdown-item v-if="isLogin" @click.native="logout">
              <span>注销</span>
            </el-dropdown-item>
            <el-dropdown-item v-else @click.native="login">
              <span>登陆</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>
  </el-header>
  <!-- </div> -->
</template>

<script>
export default {
  data() {
    return {
      url: require('@/assets/hamburger.jpg')
    }
  },
  computed: {
    isLogin() {
      return this.$store.getters.isLogin
    },
    userAvatar() {
      // console.log(this.$store.getters.userAvatar)

      // if (this.$store.getters.isLogin && this.$store.getters.userDetail && this.$store.getters.userDetail.avatar) {
      //   return this.$store.getters.userDetail.avatar
      // } else {
      return 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
      // }
    }
  },
  methods: {
    logout() {
      // console.log(this)
      // this.$message('sdfdsf')
      this.$store.dispatch('user/logout').then(res => {
        this.$notify({
          title: '成功',
          message: '注销成功',
          type: 'success',
          duration: 1500
        })
        if (this.$route.fullPath !== '/welcome') {
          setTimeout(() => {
            this.$router.replace('/welcome')
          }, 1000)
        }
      }).catch(error => {
        this.$notify({
          title: '失败',
          message: error,
          type: 'error',
          duration: 1500
        })
      })
    },
    toProfile() {
      this.$router.push('/profile')
    },
    login() {
      // this.$message('执行了')
      this.$router.push('/lr/login')
    }
  }
}
</script>

<style lang="scss" scoped>
a,
a:active {
  text-decoration: none;
  color: #333333;
}
a:hover {
  color: #409eff;
}
.el-header {
  width: 100%;
  position: sticky;
  top: 0;
  left: 0;
  background-color: #b3c0d1;
  color: #333;
  z-index: 1000;

  .el-row {
    height: 100%;
    .el-col {
      color: black;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      #bookstore-title {
        a {
          font-size: 20px;
        }
      }
      ul {
        padding-left: 0;
        text-decoration: none;
        li {
          display: inline-block;
          padding: 0 10px;
        }
      }
      .dropdown-1 {
        i {
          font-size: 28px;
          margin-right: 12px;
          &:hover {
            color: #9cd6e9;
          }
        }
      }
    }
  }
}
</style>
